<template>
  <div class="MinePage">
    <!-- 顶部背景 -->
    <div class="MinePageTopBackground">
      <div class="MinePageTopLeft">
        <div class="HeadPortrait"></div>
        <router-link class="LoginLink" to="/Login">登录/注册</router-link>
      </div>
      <div class="MinePageTopRight">
        <div></div>
      </div>
    </div>
    <!-- 我的钱包 -->
    <div class="Mywallet">
      <div class="MywalletNode1">
        <div></div>
        <span>我的钱包</span>
      </div>
      <div class="MywalletNode2"></div>
      <div class="MywalletNode3">
        <div>--</div>
        <span>红包</span>
      </div>
      <div class="MywalletNode3">
        <div>--</div>
        <span>优惠券</span>
      </div>
      <div class="MywalletNode3">
        <div>--</div>
        <span>鲜豆</span>
      </div>
      <div class="MywalletNode3">
        <div>--</div>
        <span>白条</span>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="MywalletImage">
      <swiper :options="swiperOption">
        <swiper-slide v-for="{id,imgUrl} in MywalletImage" :key="id">
          <img :src="imgUrl" />
        </swiper-slide>
        <template #pagination>
          <div class="swiper-pagination"></div>
        </template>
      </swiper>
    </div>
    <div class="FunctionalOptions">
      <div class="FunctionalOptionsNode" v-for="{id,imgUrl,title} in FunctionalOptions" :key="id">
        <div>
          <img :src="imgUrl" />
        </div>
        <span>{{title}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      MywalletImage: [],
      FunctionalOptions: [],
      swiperOption: {
        autoplay: {
          delay: 3000,
        },
        pagination: {
          el: '.swiper-pagination',
        },
      },
    };
  },
  created() {
    this.getMywalletImage();
    this.getFunctionalOptions();
  },
  methods: {
    async getMywalletImage() {
      const {
        data: { data },
      } = await this.api.getMywalletImage();
      this.MywalletImage = data;
    },
    async getFunctionalOptions() {
      const {
        data: { data },
      } = await this.api.getFunctionalOptions();
      this.FunctionalOptions = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.MinePage {
  background-color: #f6f6f6;
  height: 730px;
  .MinePageTopBackground {
    height: 115px;
    background: #fff
      url(../../public/uploads/background.png)
      no-repeat;
    background-size: 100%;
    display: flex;
    justify-content: space-between;
    line-height: 115px;
    .MinePageTopLeft {
      width: 300px;
      height: 115px;
      display: flex;
      align-items: center;
      .HeadPortrait {
        width: 61px;
        height: 61px;
        border-radius: 50%;
        border: 2px solid #fff;
        margin-left: 16px;
        background:
        url(../../public/uploads/6a645f3764663862326561613134636131353639313336323032373934_big.jpg)
        no-repeat;
        background-size: 100%;
      }
      > .LoginLink {
        padding: 7px 10px;
        margin-left: 5px;
        color: #fff;
        background-color: #69c575;
        font-size: 14px;
        line-height: 16px;
        text-decoration: none;
      }
    }
    .MinePageTopRight {
      width: 42px;
      height: 155px;
      > div {
        width: 22px;
        height: 22px;
        padding: 10px;
        background: url(../../public/uploads/sell.png) no-repeat;
        background-size: 50%;
        background-position: 50%;
      }
    }
  }
  .Mywallet {
    height: 50px;
    padding: 10px 0;
    background: #fff;
    display: flex;
    .MywalletNode1 {
      width: 73.04px;
      height: 50px;
      text-align: center;
      > div {
        width: 25px;
        height: 25px;
        margin-left: 25px;
        background: url(../../public/uploads/wallet.png) no-repeat;
        background-size: 100%;
      }
      > span {
        font-size: 12px;
      }
    }
    .MywalletNode2 {
      width: 10px;
      height: 50px;
      background: #fff url(../../public/uploads/line.png) no-repeat;
      background-size: 30%;
    }
    .MywalletNode3 {
      width: 72px;
      height: 50px;
      text-align: center;
      > span {
        font-size: 12px;
      }
    }
  }
  .MywalletImage {
    width: 100%;
    height: 75px;
    background: #fff;
    margin-top: 10px;
    img {
      width: 100%;
    }
  }
  .FunctionalOptions {
    width: 100%;
    height: 390px;
    margin-top: 10px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    .FunctionalOptionsNode {
      width: 93px;
      height: 90px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgb(232, 232, 232);
      > div {
        width: 44px;
        height: 44px;
        margin: 0 auto 15px;
        img {
          width: 100%;
        }
      }
      > span {
        display: block;
        width: 100%;
        height: 20px;
        line-height: 20px;
        font-size: 13px;
        text-align: center;
      }
    }
  }
}
</style>
